:root{
    --main-radius:0.5rem;
}

.container{
display: grid;
height: 100vh;
grid-template-columns: 15rem 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 4rem 1fr 3fr 4rem;
grid-template-areas: "nav nav nav nav nav nav"
"sidebar text text text text text"
"sidebar content1 content2 content3 content4 content5"
"sidebar footer footer footer footer footer";

grid-gap: 0.5rem;
font-weight: 800;
color: aliceblue;
font-size: 1rem;
text-align: center;
}
.container *{
    padding-top: 1rem;
}
nav{
    background: #FFB41E;
    grid-area: nav;
    border-radius: var(--main-radius);
}
.text{
    background: #5598FD;
    grid-area:text;
    border-radius: var(--main-radius);
}
.sidebar{
    background: #21D168;
    grid-area:sidebar;
    border-radius: var(--main-radius);
}
.card{
    background: #0E5D88;
    border-radius: var(--main-radius);
}
#content1{
    grid-area:content1;

}
#content2{
    grid-area:content2;
}
#content3{
    grid-area:content3;
}
#content4{
    grid-area:content4;
}
#content5{
    content5;
}
footer{
    background: #5598FD;
    grid-area:footer;
    border-radius: var(--main-radius);
}

@media only screen and (max-width:80rem) {
    .container{
        grid-template-columns: 0.4fr 1fr 1fr;
grid-template-rows: 4rem 1fr 1fr 1fr 4rem;
grid-template-areas: "nav nav nav"
"sidebar text text"
"sidebar content1 content2"
"sidebar content3 content4"
"sidebar footer footer";
    }
    #content5{
        display: none;
    }
}

@media only screen and (max-width:40rem) {
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 4rem;
        grid-template-areas: "nav"
        "sidebar"
        "text"
        "content1"
        "content2"
        "content3"
        "content4"
        "content5"
        "footer";
    }
    #content5{
        display: initial;
    }
}